<template>
	<el-checkbox style="margin-bottom: 10px;" v-model="select_all_station"
		@change="handleALLStation" label="全选" border>
	</el-checkbox>
	<el-checkbox-group v-model="stations" @change="selectOnStations">
		<el-table :data="station_list" row-key="id" border
			:header-cell-style="{background:'#ccc', color: '#003366'}"
			:tree-props="{children: 'children'}" max-height="620"
			:default-expand-all="true">
			<el-table-column prop="name" label="辖区名">
			</el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-checkbox :label="scope.row.id">选择该辖区</el-checkbox>
				</template>
			</el-table-column>
			<el-table-column prop="id" label="ID">
			</el-table-column>
		</el-table>
	</el-checkbox-group>
</template>

<script>
	import API from '@/api/index.js'
	export default {
		data() {
			return {
				station_list: [], // 获取辖区
				select_all_station: false, // 全选辖区按钮
				all_station: [], // 选择全部辖区
				stations: [],
			}
		},
		props: ['station_id'],
		watch: {
			station_id(val) {
				this.stations = val;
				if(this.stations.length == 0) {
					this.stations = [];
				}
			}
		},
		mounted() {
			this.getStations();
		},
		emits: ['getStationId'],
		methods: {
			// 获取辖区
			getStations() {
				let self = this;
				API.policeStations().then(res => {
					let data = res.data;
					self.$notify({
						message: '获取辖区成功'
					});
					data.data.map(item => {
						self.all_station.push(item.id);
					});
					self.station_list = data.data;
				}).catch(err => {
					self.$message.error(err.response.data.message)
				});
			},
			// 全选辖区
			handleALLStation(val) {
				let self = this;
				self.stations = val ? self.all_station : [];
				self.$emit("getStationId", {
					station_id : self.stations
				})
			},
			// 不全选
			selectOnStations(val) {
				let self = this;
				let checkedCount = val.length;
				self.select_all_station = checkedCount === self.all_station.length;
				self.$emit("getStationId", {
					station_id : self.stations
				})
				// self.select_all_station = checkedCount > 0 && checkedCount < self.allStation.length;
			},
		}
	}
</script>

<style>
</style>
